<template>
    <div class="hello">
      <!-- <div class="cover"></div> -->
      <div class="excel-btns">
  
<!--   
          <input style="font-size:16px;" type="file" @change="uploadExcel" />
  
          <span>载入本地表格: </span>
  
          <select v-model="selected" @change="selectExcel">
            <option disabled value="">选择</option>
            <option v-for="option in options" :key="option.text" :value="option.value">
              {{ option.text }}
            </option>
          </select> -->



         
          <!-- <button @click="getCurTable">获取当前表单</button> -->
          <el-button @click="createTable" style="margin-left: 4%;">重建</el-button>
          <!-- <el-button @click="refresh" style="margin-left: 1%;">刷新</el-button> -->
          <!-- <button @click="createTest">通过已有数据创建表单</button> -->
          <el-button type="text" style="color: black;margin-left: 30%;">{{ excel_name }}</el-button>
          
          <el-button @click="downloadExcel" style="margin-left: 23%;">导出</el-button>
          <el-button @click="save" style="margin-left: 1%;">保存</el-button>
          <el-button @click="back" style="margin-left: 1%;">返回</el-button>

      </div>
  
      <div
        id="luckysheet"
        style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 5vh;bottom:0px;"
      ></div>
  
      <div v-show="isMaskShow" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display:flex;">Downloading</div>
  
    </div>
  </template>
  
  <script>
  import LuckyExcel from 'luckyexcel'
  import {showLoading,hideLoading} from '../components/loading.js'
  //导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
  import {testaaa,exportExcel} from '../components/export.js'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data(){
      return {
        selected:"",
        cur_sheets:[],
        excel_name:"",
        author_name:"",
        author_id:"",
        options: [
          { text: 'Money Manager.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx' },
          { text: 'Activity costs tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx' },
          { text: 'House cleaning checklist.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx' },
          { text: 'Student assignment planner.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx' },
          { text: 'Credit card tracker.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx' },
          { text: 'Blue timesheet.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx' },
          { text: 'Student calendar (Mon).xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx' },
          { text: 'Blue mileage and expense report.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx' },
        ],
        isMaskShow: false,
      }
  
    },
    mounted() {
      this.excel_name=this.$route.query.excel_name;
      this.author_name=this.$store.state.big_user_info.true_name
      this.author_id=this.$store.state.user_info._id
      if(!this.$store.state.user_info._id){
                this.$router.push({path:'/login'})
       }else{
        this.createTable();
       }
      
      // In some cases, you need to use $nextTick
      // this.$nextTick(() => {
            // $(function () {
            //   luckysheet.create({
            //     container: "luckysheet",
            //   });
            // });
      // });
    },
    methods:{
      createTable(){
        //luckysheet.refresh();
        // luckysheet.refresh(()=>{
        //   luckysheet.create(this.excel_options);
        // });
        // console.log(this.excel_options)
        luckysheet.create({
            container: 'luckysheet', // 设定DOM容器的id
            title:this.excel_name, // 设定表格名称
            data:[{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }],
            lang: 'zh', // 设定表格语言
            showinfobar:false
            // 更多其他设置...
        });
       // luckysheet.create(this.excel_options);
          //   $(function () {
          //   // luckysheet.create({
          //   //   container: "luckysheet",
          //   // });
          //   window.luckysheet.destroy();
          //   luckysheet.create(this.excel_options);
          // });
       
      },
      refresh(){
        luckysheet.refresh();
      },
      getCurTable(){
        let sheets=luckysheet.getAllSheets();
        this.cur_sheets=sheets;
        console.log(this.cur_sheets);
      },
      createTableByData(sheets,name,creator){
        luckysheet.create({
                  container: 'luckysheet', //luckysheet is the container id
                  showinfobar:false,
                  data:sheets,
                  title:name,
                  userInfo:creator
              });
      },
      createTest(){
        console.log(this.cur_sheets);
        this.createTableByData(this.cur_sheets,"测试文档名","测试用户");
      },
      selectExcel(evt){
          const value = this.selected;
          const name = evt.target.options[evt.target.selectedIndex].innerText;
  
          if(value==""){
              return;
          }
          this.isMaskShow = true;
  
          LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
  
              if(exportJson.sheets==null || exportJson.sheets.length==0){
                  alert("Failed to read the content of the excel file, currently does not support xls files!");
                  return;
              }
  
              this.isMaskShow = false;
              window.luckysheet.destroy();
  
              window.luckysheet.create({
                  container: 'luckysheet', //luckysheet is the container id
                  showinfobar:false,
                  data:exportJson.sheets,
                  title:exportJson.info.name,
                  lang: 'zh',
                  userInfo:exportJson.info.name.creator
              });
          });
      },
      downloadExcel(){
        exportExcel(luckysheet.getAllSheets(),this.excel_name)
        // testaaa();
  
      },
      back(){
        // this.$router.push({path:'/index/my_excels'})
        this.$router.go(-1)
      },
      getDate(num) {
        var date1 = new Date();
        //今天时间
        var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
        var date2 = new Date(date1);
        date2.setDate(date1.getDate() + num);
        //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
        var time2 = this.addZero(date2.getFullYear()) + "-" + this.addZero((date2.getMonth() + 1)) + "-" + this.addZero(date2.getDate());
        return time2;
      },
      addZero(num) {//补0方法
        if (parseInt(num) < 10) {
          num = '0' + num;
        }
        return num;
      },
      save(){
        showLoading();
        
        let date=this.getDate(0)
        this.$ajax({
            method: 'post',
            url: '/add_excel',
            data:{
              "author_id":this.author_id,
              "author_name":this.author_name,
              "excel_name":this.excel_name,
              "date":date,
              "content":luckysheet.getAllSheets()
            }
        }).
        then(res => {    
            hideLoading()
            let status=res.data.status  
            if(status==2){
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
                this.$router.push({path:'/index/my_excels'})
            }
        }); 
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

  .excel-btns{
    margin-top: 2px;
    width: 100%;
    height: 5vh;
  }
  </style>
  